<template>
    <div class="body">
      <h3>垂直导航</h3>
      <div class="nav-content">
        <ul>
          <li><router-link :to="{name:'home'}" class="router-link">首页</router-link></li>
          <li><router-link :to="{name:'news'}" class="router-link">新闻</router-link></li>
          <!--<li><router-link class="router-link">详情</router-link></li>-->
          <!--<li><router-link class="router-link">购物车</router-link></li>-->
        </ul>
        <div class="body-content">
          <div>
            <router-view name="title" ></router-view>
          </div>
          <div>
            <keep-alive>
              <router-view ></router-view>
            </keep-alive>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: "VerticalNav"
            }
        }
    }
</script>

<style scoped>
  .body{
    height: 400px;
  }
  .nav-content{
    height: 400px;
    width: 100%;
    border: 1px  red dashed;
  }
  ul{
    list-style-type: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    width: 100px;
    height: 100%;
  }
  ul .router-link{
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
  }
  ul .router-link:hover{
    background-color: #555;
    color: white;
  }
  .body-content{
    border: 1px red dashed;
    height: 100%;
    width: 978px;
    /*background-color: #42b983;*/
    float: left;
  }
</style>
